<template>
  <div class="app-container">
    <!-- 页面头部信息 -->
    <div class="header-info">
      <h2>{{ datasetInfo.datasetName }} ({{ datasetInfo.datasetCode }}) - 版本历史</h2>
      <el-button type="primary" @click="handleBack" size="small">
        <i class="el-icon-arrow-left"></i>
        返回数据集列表
      </el-button>
    </div>

    <!-- 批量比较操作栏 -->
    <div class="batch-compare-bar" v-if="selectedVersions.length > 0">
      <el-tag size="small" type="info" effect="dark" style="margin-right: 10px;">
        已选择 {{ selectedVersions.length }} 个版本
      </el-tag>
      <el-button
        type="primary"
        size="small"
        @click="handleBatchCompare"
        :disabled="selectedVersions.length !== 2"
      >
        <i class="el-icon-s-data"></i> 比较选中版本
      </el-button>
      <el-button
        type="info"
        size="small"
        @click="clearSelection"
      >
        <i class="el-icon-close"></i> 取消选择
      </el-button>
      <el-button
        type="warning"
        size="small"
        @click="quickCompareWithCurrent"
        :disabled="selectedVersions.length !== 1"
      >
        <i class="el-icon-refresh-left"></i> 与当前版本比较
      </el-button>
    </div>

    <!-- 版本历史列表 -->
    <div class="version-list">
      <!-- 空数据提示 -->
      <div v-if="!loading && versionList.length === 0" style="text-align: center; padding: 40px 0; color: #909399;">
        <el-empty description="暂无版本历史数据"></el-empty>
      </div>
      <el-table
        :data="versionList"
        style="width: 100%"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="versionTable"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="versionId" label="版本ID" width="80" />
        <el-table-column prop="version" label="版本号" width="100" />
        <el-table-column label="数据集名称" width="180" align="left">
          <template slot-scope="scope">
            {{ scope.row.datasetName }}
            <el-tag v-if="scope.row.isCurrent" size="mini" type="success" effect="dark" style="margin-left: 8px;">
              当前版本
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="datasetType" label="数据集类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.datasetType)" size="small">{{ scope.row.datasetType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="datasourceName" label="数据源" width="150" />
        <el-table-column prop="changeDesc" label="变更说明" min-width="200" align="left" show-overflow-tooltip />
        <el-table-column prop="createBy" label="创建人" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleRollback(scope.row)"
              :disabled="scope.row.isCurrent"
              title="回滚到此版本"
            >
              <i class="el-icon-refresh-left"></i>
              回滚
            </el-button>
            <el-button
              type="success"
              size="mini"
              @click="handleCompare(scope.row)"
              title="版本比较"
            >
              <i class="el-icon-s-data"></i>
              比较
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.isCurrent"
              title="删除版本"
            >
              <i class="el-icon-delete"></i>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="versionList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next, jumper, total"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 版本比较对话框 -->
    <el-dialog
      :title="compareDialogTitle"
      :visible.sync="compareDialogVisible"
      width="90%"
      top="20px"
      append-to-body
    >
      <!-- 比较参数设置 -->
      <div class="compare-params" v-if="!compareLoading">
        <div class="compare-versions">
          <div class="version-info">
            <label>旧版本：</label>
            <el-select v-model="compareParams.oldVersionId" placeholder="请选择旧版本">
              <el-option
                v-for="version in versionList"
                :key="version.versionId"
                :label="`${version.version} - ${formatDate(version.createTime)}`"
                :value="version.versionId"
              />
            </el-select>
          </div>
          <el-button type="text" @click="swapVersions" title="交换版本顺序">
            <i class="el-icon-switch-button"></i>
          </el-button>
          <div class="version-info">
            <label>新版本：</label>
            <el-select v-model="compareParams.newVersionId" placeholder="请选择新版本">
              <el-option
                v-for="version in versionList"
                :key="version.versionId"
                :label="`${version.version} - ${formatDate(version.createTime)}`"
                :value="version.versionId"
              />
            </el-select>
          </div>
        </div>

        <!-- 比较模式选择 -->
        <div class="compare-mode">
          <label>比较模式：</label>
          <el-radio-group v-model="compareMode">
            <el-radio label="text">文本对比</el-radio>
            <el-radio label="side">并排对比</el-radio>
            <el-radio label="structure">结构化对比</el-radio>
          </el-radio-group>
          <el-button type="primary" size="small" @click="executeCompare">
            <i class="el-icon-search"></i> 执行比较
          </el-button>
        </div>
      </div>

      <!-- 比较结果展示 -->
      <div v-if="compareLoading" class="compare-loading">
        <el-loading-spinner size="large" />
        <p>正在比较版本差异，请稍候...</p>
      </div>

      <div v-else-if="compareResult && !compareLoading" class="compare-result">
        <!-- 版本信息摘要 -->
        <div class="version-summary">
          <div class="summary-item">
            <h4>旧版本信息</h4>
            <p><strong>版本号：</strong>{{ compareResult.oldVersionInfo.version }}</p>
            <p><strong>创建时间：</strong>{{ formatDate(compareResult.oldVersionInfo.createTime) }}</p>
            <p><strong>创建人：</strong>{{ compareResult.oldVersionInfo.createBy }}</p>
            <p><strong>变更说明：</strong>{{ compareResult.oldVersionInfo.changeDesc }}</p>
          </div>
          <div class="summary-item">
            <h4>新版本信息</h4>
            <p><strong>版本号：</strong>{{ compareResult.newVersionInfo.version }}</p>
            <p><strong>创建时间：</strong>{{ formatDate(compareResult.newVersionInfo.createTime) }}</p>
            <p><strong>创建人：</strong>{{ compareResult.newVersionInfo.createBy }}</p>
            <p><strong>变更说明：</strong>{{ compareResult.newVersionInfo.changeDesc }}</p>
          </div>
        </div>

        <!-- 文本对比模式 -->
        <div v-if="compareMode === 'text'" class="text-compare">
          <div class="compare-section">
            <h3>数据集定义差异</h3>
            <div v-if="compareResult.datasetDefDiff" class="diff-content">
              <pre>{{ compareResult.datasetDefDiff }}</pre>
            </div>
            <div v-else class="no-metadata-diff">无数据集定义差异</div>
          </div>
          <div class="compare-section">
            <h3>元数据差异</h3>
            <div v-if="compareResult.metadataDiff" class="diff-content">
              <pre>{{ compareResult.metadataDiff }}</pre>
            </div>
            <div v-else class="no-metadata-diff">无元数据差异</div>
          </div>
        </div>

        <!-- 并排对比模式 -->
        <div v-if="compareMode === 'side'" class="side-compare">
          <div class="compare-section">
            <h3>属性差异对比</h3>
            <div v-if="compareResult.propertyDiffList && compareResult.propertyDiffList.length > 0">
              <el-table :data="compareResult.propertyDiffList" border style="width: 100%">
                <el-table-column prop="propertyName" label="属性名称" width="180" />
                <el-table-column label="旧版本值" min-width="250">
                  <template slot-scope="scope">
                    <div class="json-container">
                      <pre class="json-pre json-diff-old">{{ formatJson(scope.row.oldValue) }}</pre>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="新版本值" min-width="250">
                  <template slot-scope="scope">
                    <div class="json-container">
                      <pre class="json-pre json-diff-new">{{ formatJson(scope.row.newValue) }}</pre>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="changeType" label="变更类型" width="120">
                  <template slot-scope="scope">
                    <el-tag :type="getChangeTypeTagType(scope.row.changeType)">
                      {{ getChangeTypeText(scope.row.changeType) }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else class="no-metadata-diff">无属性差异</div>
          </div>
        </div>

        <!-- 结构化对比模式 -->
        <div v-if="compareMode === 'structure'" class="structure-compare">
          <div v-if="compareResult.structuralDiff">
            <!-- 新增的属性 -->
            <div v-if="compareResult.structuralDiff.added && compareResult.structuralDiff.added.length > 0" class="diff-section">
              <h3><i class="el-icon-plus" style="color: #67c23a;"></i> 新增的属性 ({{ compareResult.structuralDiff.added.length }})</h3>
              <div class="diff-content">
                <div v-for="(item, index) in compareResult.structuralDiff.added" :key="index" class="diff-new">
                  <span class="diff-label">{{ item.propertyName }}:</span>
                  <div class="json-container">
                    <pre>{{ formatJson(item.value) }}</pre>
                  </div>
                </div>
              </div>
            </div>

            <!-- 删除的属性 -->
            <div v-if="compareResult.structuralDiff.deleted && compareResult.structuralDiff.deleted.length > 0" class="diff-section">
              <h3><i class="el-icon-delete" style="color: #f56c6c;"></i> 删除的属性 ({{ compareResult.structuralDiff.deleted.length }})</h3>
              <div class="diff-content">
                <div v-for="(item, index) in compareResult.structuralDiff.deleted" :key="index" class="diff-old">
                  <span class="diff-label">{{ item.propertyName }}:</span>
                  <div class="json-container">
                    <pre>{{ formatJson(item.value) }}</pre>
                  </div>
                </div>
              </div>
            </div>

            <!-- 修改的属性 -->
            <div v-if="compareResult.structuralDiff.modified && compareResult.structuralDiff.modified.length > 0" class="diff-section">
              <h3><i class="el-icon-edit" style="color: #e6a23c;"></i> 修改的属性 ({{ compareResult.structuralDiff.modified.length }})</h3>
              <div class="diff-content">
                <div v-for="(item, index) in compareResult.structuralDiff.modified" :key="index" class="diff-modified">
                  <h4>{{ item.propertyName }}</h4>
                  <div class="diff-old">
                    <span class="diff-label">旧值:</span>
                    <div class="json-container">
                      <pre>{{ formatJson(item.oldValue) }}</pre>
                    </div>
                  </div>
                  <div class="diff-new">
                    <span class="diff-label">新值:</span>
                    <div class="json-container">
                      <pre>{{ formatJson(item.newValue) }}</pre>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-metadata-diff">无结构化差异</div>
        </div>
      </div>

      <div v-else-if="!compareLoading && !compareResult" class="no-compare-data">
        <el-empty description="请选择版本并执行比较"></el-empty>
      </div>
    </el-dialog>

    <!-- 回滚确认对话框 -->
    <el-dialog
      title="版本回滚确认"
      :visible.sync="rollbackDialogVisible"
      width="500px"
      top="30%"
      append-to-body
    >
      <div class="rollback-confirm-content">
        <p>您确定要回滚到此版本吗？</p>
        <div class="warning-text">
          <i class="el-icon-warning"></i> 回滚操作将覆盖当前版本的数据集定义和元数据，请谨慎操作！
        </div>
        <el-form label-position="top">
          <el-form-item label="回滚说明">
            <el-input
              v-model="rollbackReason"
              type="textarea"
              :rows="3"
              placeholder="请输入回滚原因"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rollbackDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRollback" :loading="rollbackLoading">确认回滚</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDatasetVersionList, compareDatasetVersions, rollbackDatasetVersion, deleteDatasetVersion } from '@/api/system/dataset';

export default {
  name: 'DatasetVersionHistory',
  data() {
    return {
      // 数据集基本信息
      datasetInfo: {
        datasetName: '示例数据集',
        datasetCode: 'SAMPLE_DATASET'
      },
      // 版本列表数据
      versionList: [],
      // 选中的版本
      selectedVersions: [],
      // 加载状态
      loading: false,
      // 分页信息
      total: 0,
      currentPage: 1,
      pageSize: 10,
      // 比较对话框
      compareDialogVisible: false,
      compareDialogTitle: '版本比较',
      compareParams: {
        oldVersionId: null,
        newVersionId: null
      },
      compareMode: 'text', // 'text', 'side', 'structure'
      compareResult: null,
      compareLoading: false,
      // 回滚对话框
      rollbackDialogVisible: false,
      rollbackVersion: null,
      rollbackReason: '',
      rollbackLoading: false
    };
  },
  created() {
    // 从路由参数获取数据集ID
    this.datasetId = this.$route.params.datasetId || '1';
    // 加载版本列表
    this.loadVersionList();

  },
  methods: {
    // 加载数据集信息
    loadDatasetInfo() {
      // 实际项目中应该从API获取数据集信息
      this.datasetInfo = {
        datasetName: '客户信息数据集',
        datasetCode: 'CUSTOMER_INFO'
      };
    },

    // 加载版本列表
    loadVersionList() {
      this.loading = true;
      // 实际项目中应该调用API获取数据
      getDatasetVersionList(this.datasetId)
        .then(response => {
          this.versionList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          this.$message.error('加载版本列表失败');
        });


    },



    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return d.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },

    // 格式化JSON
    formatJson(json) {
      if (typeof json !== 'string') {
        return JSON.stringify(json, null, 2);
      }
      try {
        const parsed = JSON.parse(json);
        return JSON.stringify(parsed, null, 2);
      } catch (e) {
        return json;
      }
    },

    // 获取类型标签类型
    getTypeTagType(type) {
      const typeMap = {
        '结构化': 'primary',
        '半结构化': 'success',
        '非结构化': 'warning'
      };
      return typeMap[type] || 'info';
    },

    // 获取变更类型标签类型
    getChangeTypeTagType(changeType) {
      const typeMap = {
        'add': 'success',
        'delete': 'danger',
        'modify': 'warning'
      };
      return typeMap[changeType] || 'info';
    },

    // 获取变更类型文本
    getChangeTypeText(changeType) {
      const textMap = {
        'add': '新增',
        'delete': '删除',
        'modify': '修改'
      };
      return textMap[changeType] || changeType;
    },

    // 处理版本选择变化
    handleSelectionChange(selection) {
      this.selectedVersions = selection;
    },

    // 清空选择
    clearSelection() {
      this.$refs.versionTable.clearSelection();
    },

    // 批量比较
    handleBatchCompare() {
      if (this.selectedVersions.length !== 2) {
        this.$message.warning('请选择两个版本进行比较');
        return;
      }

      // 按版本创建时间排序，确保旧版本在前
      const sortedVersions = [...this.selectedVersions].sort((a, b) =>
        new Date(a.createTime) - new Date(b.createTime)
      );

      this.compareParams.oldVersionId = sortedVersions[0].versionId;
      this.compareParams.newVersionId = sortedVersions[1].versionId;
      this.compareDialogTitle = `版本比较：${sortedVersions[0].version} vs ${sortedVersions[1].version}`;
      this.compareDialogVisible = true;
    },

    // 与当前版本比较
    quickCompareWithCurrent() {
      if (this.selectedVersions.length !== 1) {
        this.$message.warning('请选择一个版本与当前版本比较');
        return;
      }

      const selectedVersion = this.selectedVersions[0];
      const currentVersion = this.versionList.find(v => v.isCurrent);

      if (!currentVersion) {
        this.$message.error('未找到当前版本');
        return;
      }

      // 确保旧版本在前
      if (new Date(selectedVersion.createTime) < new Date(currentVersion.createTime)) {
        this.compareParams.oldVersionId = selectedVersion.versionId;
        this.compareParams.newVersionId = currentVersion.versionId;
      } else {
        this.compareParams.oldVersionId = currentVersion.versionId;
        this.compareParams.newVersionId = selectedVersion.versionId;
      }

      this.compareDialogTitle = `版本比较：${selectedVersion.version} vs 当前版本`;
      this.compareDialogVisible = true;
    },

    // 单行比较
    handleCompare(row) {
      const currentVersion = this.versionList.find(v => v.isCurrent);

      if (!currentVersion) {
        this.$message.error('未找到当前版本');
        return;
      }

      // 确保旧版本在前
      if (new Date(row.createTime) < new Date(currentVersion.createTime)) {
        this.compareParams.oldVersionId = row.versionId;
        this.compareParams.newVersionId = currentVersion.versionId;
      } else {
        this.compareParams.oldVersionId = currentVersion.versionId;
        this.compareParams.newVersionId = row.versionId;
      }

      this.compareDialogTitle = `版本比较：${row.version} vs 当前版本`;
      this.compareDialogVisible = true;
    },

    // 交换版本顺序
    swapVersions() {
      const temp = this.compareParams.oldVersionId;
      this.compareParams.oldVersionId = this.compareParams.newVersionId;
      this.compareParams.newVersionId = temp;
    },

    // 执行比较
    executeCompare() {
      if (!this.compareParams.oldVersionId || !this.compareParams.newVersionId) {
        this.$message.warning('请选择两个版本进行比较');
        return;
      }

      this.compareLoading = true;
      // 实际项目中应该调用API获取比较结果
      // compareDatasetVersions({
      //   oldVersionId: this.compareParams.oldVersionId,
      //   newVersionId: this.compareParams.newVersionId
      // })
      //   .then(response => {
      //     this.compareResult = response;
      //     this.compareLoading = false;
      //   })
      //   .catch(error => {
      //     this.compareLoading = false;
      //     this.$message.error('版本比较失败');
      //   });

      // 模拟比较结果
      setTimeout(() => {
        this.compareResult = this.getMockCompareResult();
        this.compareLoading = false;
      }, 1000);
    },

    // 模拟比较结果
    getMockCompareResult() {
      const oldVersion = this.versionList.find(v => v.versionId === this.compareParams.oldVersionId);
      const newVersion = this.versionList.find(v => v.versionId === this.compareParams.newVersionId);

      return {
        oldVersionInfo: oldVersion,
        newVersionInfo: newVersion,
        datasetDefDiff: `--- 旧版本数据集定义
+++ 新版本数据集定义
@@ -1,5 +1,6 @@
 {
   "datasetName": "客户信息数据集",
+  "description": "存储客户基本信息及积分数据",
   "datasetCode": "CUSTOMER_INFO",
   "datasetType": "structured",
   "dataSource": "MySQL主库",
@@ -10,6 +11,7 @@
     "customerPhone",
     "customerEmail",
     "customerAddress",
+    "customerPoints",
     "createTime",
     "updateTime"
   ],
@@ -20,4 +22,5 @@
   "updateBy": "admin",
   "createTime": "2024-05-01 10:00:00",
   "updateTime": "2024-05-20 15:30:22",
-  "version": "v1.2.1"
+  "version": "v1.3.0",
+  "indexes": [{"name": "idx_customer_id", "columns": ["customerId"]}]
 }`,
        metadataDiff: `--- 旧版本元数据
+++ 新版本元数据
@@ -5,6 +5,13 @@
     "dataType": "VARCHAR",
     "length": 255,
     "nullable": true
+  },
+  {
+    "fieldName": "customerPoints",
+    "displayName": "客户积分",
+    "dataType": "INT",
+    "length": 10,
+    "nullable": true,
+    "defaultValue": "0"
   }
 ]`,
        propertyDiffList: [
          {
            propertyName: 'datasetName',
            oldValue: '客户信息数据集',
            newValue: '客户信息数据集',
            changeType: 'none'
          },
          {
            propertyName: 'description',
            oldValue: null,
            newValue: '存储客户基本信息及积分数据',
            changeType: 'add'
          },
          {
            propertyName: 'columns',
            oldValue: '["customerId","customerName","customerPhone","customerEmail","customerAddress","createTime","updateTime"]',
            newValue: '["customerId","customerName","customerPhone","customerEmail","customerAddress","customerPoints","createTime","updateTime"]',
            changeType: 'modify'
          },
          {
            propertyName: 'version',
            oldValue: 'v1.2.1',
            newValue: 'v1.3.0',
            changeType: 'modify'
          },
          {
            propertyName: 'indexes',
            oldValue: null,
            newValue: '[{"name":"idx_customer_id","columns":["customerId"]}]',
            changeType: 'add'
          }
        ],
        structuralDiff: {
          added: [
            {
              propertyName: 'description',
              value: '存储客户基本信息及积分数据'
            },
            {
              propertyName: 'customerPoints',
              value: {
                fieldName: 'customerPoints',
                displayName: '客户积分',
                dataType: 'INT',
                length: 10,
                nullable: true,
                defaultValue: '0'
              }
            },
            {
              propertyName: 'indexes',
              value: [{
                name: 'idx_customer_id',
                columns: ['customerId']
              }]
            }
          ],
          deleted: [],
          modified: [
            {
              propertyName: 'columns',
              oldValue: ['customerId', 'customerName', 'customerPhone', 'customerEmail', 'customerAddress', 'createTime', 'updateTime'],
              newValue: ['customerId', 'customerName', 'customerPhone', 'customerEmail', 'customerAddress', 'customerPoints', 'createTime', 'updateTime']
            },
            {
              propertyName: 'version',
              oldValue: 'v1.2.1',
              newValue: 'v1.3.0'
            }
          ]
        }
      };
    },

    // 处理回滚
    handleRollback(row) {
      if (row.isCurrent) {
        this.$message.warning('当前版本无需回滚');
        return;
      }

      this.rollbackVersion = row;
      this.rollbackDialogVisible = true;
    },

    // 确认回滚
    confirmRollback() {
      if (!this.rollbackReason.trim()) {
        this.$message.warning('请输入回滚原因');
        return;
      }

      this.rollbackLoading = true;
      // 实际项目中应该调用API执行回滚
      // rollbackDatasetVersion({
      //   versionId: this.rollbackVersion.versionId,
      //   reason: this.rollbackReason
      // })
      //   .then(response => {
      //     this.$message.success('回滚成功');
      //     this.rollbackDialogVisible = false;
      //     this.loadVersionList();
      //     this.rollbackLoading = false;
      //   })
      //   .catch(error => {
      //     this.rollbackLoading = false;
      //     this.$message.error('回滚失败');
      //   });

      // 模拟回滚操作
      setTimeout(() => {
        this.$message.success('回滚成功');
        this.rollbackDialogVisible = false;
        // 更新版本列表，将回滚的版本标记为当前版本
        this.versionList.forEach(v => {
          v.isCurrent = v.versionId === this.rollbackVersion.versionId;
        });
        this.rollbackLoading = false;
        this.rollbackReason = '';
      }, 1000);
    },

    // 处理删除
    handleDelete(row) {
      if (row.isCurrent) {
        this.$message.warning('不能删除当前版本');
        return;
      }

      this.$confirm(`确定要删除版本 ${row.version} 吗？此操作不可撤销。`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际项目中应该调用API执行删除
        // deleteDatasetVersion(row.versionId)
        //   .then(response => {
        //     this.$message.success('删除成功');
        //     this.loadVersionList();
        //   })
        //   .catch(error => {
        //     this.$message.error('删除失败');
        //   });

        // 模拟删除操作
        setTimeout(() => {
          this.versionList = this.versionList.filter(v => v.versionId !== row.versionId);
          this.total = this.versionList.length;
          this.$message.success('删除成功');
        }, 500);
      }).catch(() => {
        // 用户取消删除
      });
    },

    // 处理分页变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadVersionList();
    },

    // 处理每页大小变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadVersionList();
    },

    // 返回数据集列表
    handleBack() {
      this.$router.push('/system/dataset');
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.header-info h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.batch-compare-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
}

.batch-compare-bar .el-button {
  margin-left: 10px;
}

.version-list {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

/* 比较对话框样式 */
.compare-params {
  margin-bottom: 20px;
}

.compare-versions {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.version-info {
  flex: 1;
  margin-right: 15px;
  min-width: 250px;
}

.version-info label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
}

.compare-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.compare-mode label {
  color: #606266;
  font-weight: 500;
  margin-right: 10px;
}

.compare-mode .el-radio-group {
  margin-right: 20px;
}

.compare-loading {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.compare-loading p {
  margin-top: 10px;
}

.compare-result {
  max-height: 600px;
  overflow-y: auto;
}

.version-summary {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.summary-item {
  flex: 1;
}

.summary-item h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
  font-size: 16px;
}

.summary-item p {
  margin: 5px 0;
  color: #606266;
}

.text-compare .compare-section,
.side-compare .compare-section {
  margin-bottom: 30px;
}

.compare-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  border-left: 3px solid #409eff;
  padding-left: 10px;
}

.diff-content {
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow-x: auto;
}

.diff-content pre {
  margin: 0;
  padding: 15px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.structure-compare .diff-section {
  margin-bottom: 25px;
}

.structure-compare .diff-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.diff-modified {
  margin-bottom: 20px;
}

.diff-modified h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

.diff-old,
.diff-new {
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  margin-bottom: 10px;
}

.diff-old {
  border-left: 3px solid #f56c6c;
  background-color: #fef0f0;
}

.diff-new {
  border-left: 3px solid #67c23a;
  background-color: #f0f9ff;
}

.diff-label {
  font-weight: 500;
  color: #606266;
  margin-right: 8px;
  margin-bottom: 5px;
  display: block;
}

.json-container {
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow-x: auto;
}

.diff-old .json-container,
.diff-new .json-container {
  margin-top: 5px;
}

.diff-old pre,
.diff-new pre {
  margin: 0;
  padding: 10px;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.json-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px;
}

.json-diff-old {
  color: #f56c6c;
}

.json-diff-new {
  color: #67c23a;
}

/* 滚动条样式优化 */
.compare-result::-webkit-scrollbar,
.json-container::-webkit-scrollbar,
.diff-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.compare-result::-webkit-scrollbar-track,
.json-container::-webkit-scrollbar-track,
.diff-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.compare-result::-webkit-scrollbar-thumb,
.json-container::-webkit-scrollbar-thumb,
.diff-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.compare-result::-webkit-scrollbar-thumb:hover,
.json-container::-webkit-scrollbar-thumb:hover,
.diff-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.no-metadata-diff {
  text-align: center;
  padding: 30px;
  color: #909399;
  background-color: #fafafa;
  border-radius: 4px;
}

.no-compare-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

/* 回滚确认对话框 */
.rollback-confirm-content {
  padding: 10px 0;
}

.warning-text {
  color: #e6a23c;
  margin: 10px 0;
  padding: 10px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 3px solid #e6a23c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .batch-compare-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .version-versions {
    flex-direction: column;
    gap: 15px;
  }

  .version-info {
    width: 100%;
    margin-right: 0;
  }

  .version-summary {
    flex-direction: column;
    gap: 20px;
  }
}
</style>
